<div id = "addConstraint">
  <form>
    <select id="from" name = "from" [(ngModel)]="fromInt">
      <option *ngFor="let interaction of interactions" value="{{interaction.number}},{{interaction.state}}">int{{interaction.number}},state:{{interaction.state}}</option>
    </select>
    <select name = "cons" [(ngModel)]="cons">
      <option value="StrictPre">StrictPre</option>
      <option value="BoundedDiff">BoundedDiff</option>
      <option value="Cause">Cause</option>
      <option value="Union">Union</option>
      <option value="Alternate">Alternate</option>
      <option value="Delay">Delay</option>
      <option value="Inf">Inf</option>
      <option value="Sup">Sup</option>
      <option value="Exclusion">Exclusion</option>
      <option value="Coincidence">Coincidence</option>
    </select>
    <select id="to" name = "to" [(ngModel)]="toInt">
      <option *ngFor="let interaction of interactions" value="{{interaction.number}},{{interaction.state}}">int{{interaction.number}},state:{{interaction.state}}</option>
      <option *ngIf="cons === 'Delay'" value="idealClcok">idealClock</option>
    </select>
    <br>
    <input type="text" *ngIf="cons === 'BoundedDiff'" class="ExtraInput" name="boundedFrom" value="BoundedDiffFrom" [(ngModel)]="boundedFrom">
    <br>
    <input type="text" *ngIf="cons == 'BoundedDiff'" class="ExtraInput" name="boundedTo"  value="BoundedDiffTo" [(ngModel)]="boundedTo">
    <input type="text" *ngIf="cons == 'Union' || cons == 'Inf' || cons == 'Sup'" class="ExtraInput" name="addedClockName" placeholder = "name" value="addedClockName" [(ngModel)]="addedClockName">
    <input type="text" *ngIf="cons == 'Delay'" class="ExtraInput" name="addedTime" placeholder = "time" value="addedTime" [(ngModel)]="addedTime">
    <br><br><br><br><br><br>
    <input type="submit" value="Submit" (click) = "checkCons()">
    <input type="submit" value="Cancel" (click) = "goBack()">
  </form>
</div>
